/*
 * @Author: your name
 * @Date: 2022-01-30 15:18:57
 * @LastEditTime: 2022-02-03 21:26:56
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-vite-tsx\src\components\dialog\src\dialog.tsx
 */

import { defineComponent, ref } from 'vue'
import style from './dialog.module.less'
export default defineComponent({
  name: 'Dialogs',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },

  setup(props, ctx) {
    const content = ref(null)

    // 关闭对话框
    const handleClose = () => {
      ctx.emit('update:show', false)
    }

    // mask 关闭
    const handleMask = (e: Event) => {
      // 阻止事件冒泡,只有点击外层mask才会关闭
      if (e.target === content.value) {
        handleClose()
      }
    }
    return () => (
      <>
        {props.show ? (
          <div class={style['c-dialog']} ref={content} onClick={handleMask}>
            <div class={style.content}>
              {/* 关闭按钮 */}
              <div class={style.close} onClick={handleClose}>
                ×
              </div>
              {/* 头部插槽 */}
              <div class={style.header}>{ctx.slots.header ? ctx.slots.header() : '标题'}</div>

              {/* 中间自定义插槽 */}
              {ctx.slots.default ? ctx.slots.default() : ''}

              {/* 底部插槽 */}
              <div class={style.footer}>
                {ctx.slots.footer ? (
                  ctx.slots.footer()
                ) : (
                  <div>
                    <button class={style.btn} onClick={handleClose}>
                      取消
                    </button>
                    <button class={style.btn} onClick={handleClose}>
                      确定
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        ) : (
          ''
        )}
      </>
    )
  }
})
